/* ######################################################################

	PD1000 'kit_background.css' for PIUON - 2014.04.01
	HTML 5 & Newest web browser preferential support
	Specialization for webapp

	- By PD1000 (Web service creator) -

	본 스타일시트는 배경 화면을 구현해주는 스타일시트이다.

###################################################################### */

/* ======================================================================
	Background Layer
====================================================================== */

/* layer z-index
---------------------------------------------------------------------- */
.bg_basic_layer{z-index:0}		/* Layer 0 - Basic piuon wallpaper */
.bg_pattern_layer{z-index:1}	/* Layer 1 - Recurrence patterns */
.bg_texture_layer{z-index:2}	/* Layer 2 - Wallpapers */
.bg_pic_layer{z-index:3}		/* Layer 3 - Main images */
.bg_color_layer{z-index:4}		/* Layer 4 - Colors */
.bg_envelop_layer{z-index:5}	/* Layer 5 - Envelop patterns */
.bg_effect_layer{z-index:6}		/* Layer 6 - Special effects */


/* Basic setting for background
---------------------------------------------------------------------- */
.bg_basic_img{background:url(../images/bg_main.jpg) no-repeat} /* PIUON Basic wallpaper */
.bg_pattern{background-image:url(../item_bg_patterns/pattern_p7.gif);}
.bg_texture{background-image:url(../item_bg_textures/texture_t7.jpg);}
.bg_inner, .bg_texture, .bg_pattern{background-position:center center;overflow:hidden;z-index:1}
.bg_texture{cursor:move}
.bg_effect{margin:0 auto}


/* Layer 3 - 'bg_pic'
---------------------------------------------------------------------- */
.bg_pic_con{position:absolute;top:10%;left:10%;width:80%;height:70%;box-sizing:border-box;cursor:move;overflow:hidden;z-index:1}
.bgpic_img{width:100%}


/* Image mask options (For webkit)
---------------------------------------------------------------------- */
/* Option button */
.bg_pic_option{position:absolute;top:4px;left:4px;width:100%}
.option_bar{width:174px;height:17px;padding:8px 5px 9px 53px;background:url(../images/option_bar.png) no-repeat}
.btn_bgpic_mo{margin:0 -2px;cursor:pointer}

/* Mask option */
.mask_00{}
.mask_lt{-webkit-mask-image:-webkit-radial-gradient(left top, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%)}
.mask_rt{-webkit-mask-image:-webkit-radial-gradient(right top, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%)}
.mask_lb{-webkit-mask-image:-webkit-radial-gradient(left bottom, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%)}
.mask_rb{-webkit-mask-image:-webkit-radial-gradient(right bottom, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%)}
.mask_cc{-webkit-mask-image:-webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%)}
.mask_ll{-webkit-mask-image:-webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%)}
.mask_rr{-webkit-mask-image:-webkit-linear-gradient(right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%)}
.mask_tt{-webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%)}
.mask_bb{-webkit-mask-image:-webkit-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,0.7) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%)}


/* Elements position value viewer
---------------------------------------------------------------------- */
.data_box_texture{position:fixed;top:0;right:0;z-index:99}
.data_value{display:none;background:red;padding:5px;border:1px solid #ddd;text-align:center;font-weight:bold;color:white;font-size:1.4rem}


/* ======================================================================
	Media Query
====================================================================== */